<template>
    <PageCard title="工作台" class="workbench-pageCard" style="position: absolute;left: 0;right: 0;bottom: 0;top: 0;">
        <template #actions>
            <AutoReply></AutoReply>
        </template>
        <div class="flex-box" style="height: 100%;padding-bottom: 8px">
            <Channels @select="clickListItem" />
            <div class="flex flex-col flex-1 mx-4 overflow-hidden rounded-xl h-full border border-[#E4E7ED]">
                <div class="flex items-center bg-[#FEF9F0] px-5 py-[10px] border-b">
                    <el-image class="h-10 w-10 rounded-full" v-if="listItemTitle.avatar" :src="listItemTitle.avatar"
                              fit="cover">
                    </el-image>
                    <div v-else>
                        <svg-icon class="text-[48px]" icon-class="work-oder-header-svg" />
                    </div>
                    <div class="overflow-hidden flex-1 mx-[9px]" v-if="listItemTitle.nickName">
                        <p class="font-bold text-sm leading-[22px] text-[#414448]">{{ listItemTitle.nickName }}</p>
                        <p class="text-xs leading-[22px] text-[#606266]">{{ userItemTitle &&
                                userItemTitle['identityName']
                        }}</p>
                    </div>
                    <div v-else class="text-sm text-[#C0C4CC] mx-[9px]">暂未选择用户</div>
                </div>
                <Viewer class="flex-1 bg-[#FBFBFB]" :open-id="listItemTitle.openId" :app-id="listItemTitle.appId"
                        ref="viewer" />
                <div class="input-box relative">
                    <textarea class="textarea-content" type="textarea" placeholder="请输入内容" rows="3"
                              :disabled="leftBackId == null" v-model="textarea" :maxlength="200" @keydown.enter="seedIfEnter"></textarea>
                    <el-button class="ed-button ed_black-bottom absolute right-4 bottom-4" :disabled="disabledSeed"
                               @click="seed">发 送
                    </el-button>
                </div>
            </div>
            <div id="right">
                <div class="workbench-right-box overflowHidden" v-if="isHistoricalWorkOrder">
                    <WorkBenchCard title="历史工单">
                        <template #back>
                            <div class="createBack">
                                <el-button class="ed-button ed_black-bottom" :disabled="leftBackId == null"
                                           @click="addWorkOrder" style="padding: 4px 15px">
                                    <svg-icon icon-class="add-svg" />
                                    发起工单
                                </el-button>
                            </div>
                        </template>
                    </WorkBenchCard>
                    <div class="workbench-right-box-scroll" v-if="historicalWorkList && historicalWorkList.length > 0"
                         v-infinite-scroll="load" infinite-scroll-immediate="false">
                        <div class="relative workbench-right-box-scroll-small-box" id="historicalWorkListId"
                             @click="workOrderDetails(item)" v-for="item in historicalWorkList" :key="item.orderNo">
                            <div class="flex-box flex-justify-content-space-between marginBottom20">
                                <p class="fontSize16">工单号：{{ item.orderNo }}
                                    <svg-icon icon-class="urgent-svg" v-if="item.level == 2"
                                              style="margin: 0 4px 0 10px" />
                                    <svg-icon icon-class="urgent1-svg" v-if="item.level == 1"
                                              style="margin: 0 4px 0 10px" />
                                    <svg-icon icon-class="emergency-svg" v-if="item.level == 0"
                                              style="margin: 0 4px 0 10px" />
                                    <span class="fontSize14" v-if="item.level == 2" style="color: #EE7171">{{
                                            $validate.codeFilter(item.level, levelParams.options)
                                    }}</span>
                                    <span class="fontSize14" v-if="item.level == 1" style="color: #F3B385">{{
                                            $validate.codeFilter(item.level, levelParams.options)
                                    }}</span>
                                    <span class="fontSize14" v-if="item.level == 0" style="color: #EED096">{{
                                            $validate.codeFilter(item.level, levelParams.options)
                                    }}</span>
                                </p>
                                <el-button class="ed-work-bottom ed_confirm_border cursorDefault"
                                           v-if="item.status == 'confirmed'">已确认</el-button>
                                <el-button class="ed-work-bottom ed_confirm_blue_border cursorDefault"
                                           v-if="item.status == 'confirm'">待确认</el-button>
                                <el-button class="ed-work-bottom ed_grey_border cursorDefault"
                                           v-if="item.status == 'success'">已完成</el-button>
                                <el-button class="ed-work-bottom ed_wait_border cursorDefault"
                                           v-if="item.status == 'pending'">待处理</el-button>
                                <el-button class="ed-work-bottom ed_wait_border cursorDefault"
                                           v-if="item.status == 'processing'">处理中</el-button>
                                <el-button class="ed-work-bottom ed_red_border cursorDefault"
                                           v-if="item.status == 'reject'">已驳回</el-button>
                                <el-button class="ed-work-bottom ed_grey_border cursorDefault"
                                           v-if="item.status == 'paid'">已付款</el-button>
                                <el-button class="ed-work-bottom ed_grey_opacity_border cursorDefault"
                                           v-if="item.status == 'cancel'">已撤销</el-button>
                                <el-button class="ed-work-bottom ed_grey_opacity_border cursorDefault"
                                           v-if="item.status == 'close'">已关闭</el-button>
                            </div>
                            <div class="flex-box marginBottom5">
                                <p class="fontSize14 line-height22 WColor1 minWidth70">工单地址：</p>
                                <p class="fontSize14 line-height22 WColor2">{{ item.villageName + item.address }}</p>
                            </div>
                            <div class="flex-box marginBottom5">
                                <p class="fontSize14 line-height22 WColor1 minWidth70">工单内容：</p>
                                <p class="fontSize14 line-height22 WColor2"
                                   style="max-width: 400px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">
                                    {{ item.serveDesc }}</p>
                            </div>
                            <div class="flex-box flex-justify-content-space-between">
                                <div>
                                    <span class="fontSize14 line-height22 WColor1 minWidth70">工单类型：</span>
                                    <span class="fontSize14 line-height22 WColor2">{{
                                            $validate.codeFilter(item.orderType, identityParams.options)
                                    }}</span>
                                </div>
                                <div style="margin-right: 50px">
                                    <span class="fontSize14 line-height22 WColor1 minWidth70">报单时间：</span>
                                    <span class="fontSize14 line-height22 WColor2">{{ item.createTime }}</span>
                                </div>
                            </div>
                            <div
                                 style="position: absolute;right: 18px;top: 84px;width: 30px;height: 30px;line-height: 30px;text-align: center;cursor: pointer">
                                <i class="el-icon-arrow-right" style="color: #414448;"></i>
                            </div>

                        </div>
                    </div>
                    <div class="workbench-right-box-scroll text-center" v-else>
                        <div>
                            <svg-icon style="font-size: 204px;margin-top: 64px" icon-class="none-work-order-svg" />
                            <p style="color: #D8D8D8;margin-top: -30px" class="fontSize14 line-height22">暂无历史工单</p>
                        </div>
                    </div>
                </div>

                <div class="workbench-right-box overflowHidden" v-if="isWorkOrderDetails">
                    <WorkBenchCard title="工单详情">
                        <template #back>
                            <div class="createBack fontSize14 cursorPointer" @click="workOrderDetailsBack">
                                <!-- <svg-icon icon-class="back" /> -->
                                <img :src="require('src/images/uiImages/property/back.png')"
                                     style="width:16px;height:16px;transform: translateY(-2px);" alt="">
                                返回
                            </div>
                        </template>
                    </WorkBenchCard>
                    <div style="padding: 8px;height: calc(100% - 59px);overflow-y: auto;">
                        <div style="padding: 13px 12px" class="relative">
                            <div class="flex-box flex-justify-content-space-between marginBottom12">
                                <p class="fontSize16 WColor4">工单号：{{ workOrderDetailsObj.orderNo }}
                                    <svg-icon icon-class="urgent-svg" v-if="workOrderDetailsObj.level == 2"
                                              style="margin: 0 4px 0 10px" />
                                    <svg-icon icon-class="urgent2-svg" v-if="workOrderDetailsObj.level == 1"
                                              style="margin: 0 4px 0 10px" />
                                    <svg-icon icon-class="emergency-svg" v-if="workOrderDetailsObj.level == 0"
                                              style="margin: 0 4px 0 10px" />
                                    <span class="fontSize14" v-if="workOrderDetailsObj.level == 2"
                                          style="color: #EE7171">{{ $validate.codeFilter(workOrderDetailsObj.level,
                                                  serve_order_level)
                                          }}</span>
                                    <span class="fontSize14" v-if="workOrderDetailsObj.level == 1"
                                          style="color: #F3B385">{{ $validate.codeFilter(workOrderDetailsObj.level,
                                                  serve_order_level)
                                          }}</span>
                                    <span class="fontSize14" v-if="workOrderDetailsObj.level == 0"
                                          style="color: #EED096">{{ $validate.codeFilter(workOrderDetailsObj.level,
                                                  serve_order_level)
                                          }}</span>
                                </p>
                                <el-button class="ed-work-bottom ed_confirm_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'confirmed'">已确认</el-button>
                                <el-button class="ed-work-bottom ed_confirm_blue_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'confirm'">待确认</el-button>
                                <el-button class="ed-work-bottom ed_grey_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'success'">已完成</el-button>
                                <el-button class="ed-work-bottom ed_wait_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'pending'">待处理</el-button>
                                <el-button class="ed-work-bottom ed_wait_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'processing'">处理中</el-button>
                                <el-button class="ed-work-bottom ed_red_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'reject'">已驳回</el-button>
                                <el-button class="ed-work-bottom ed_grey_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'paid'">已付款</el-button>
                                <el-button class="ed-work-bottom ed_grey_opacity_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'cancel'">已撤销</el-button>
                                <el-button class="ed-work-bottom ed_grey_opacity_border cursorDefault"
                                           v-if="workOrderDetailsObj.status == 'close'">已关闭</el-button>
                            </div>
                            <div class="flex-box marginBottom12">
                                <p class="fontSize14 line-height22 WColor3">工单类型：</p>
                                <p class="fontSize14 line-height22 WColor2">
                                    {{ $validate.codeFilter(workOrderDetailsObj.orderType, identityParams.options) }}
                                </p>
                            </div>
                            <div class="flex-box marginBottom12">
                                <p class="fontSize14 line-height22 WColor3">工单地址：</p>
                                <p class="fontSize14 line-height22 WColor2">{{ workOrderDetailsObj.villageName +
                                        workOrderDetailsObj.address
                                }}</p>
                            </div>
                            <div class="flex-box marginBottom12">
                                <p class="fontSize14 line-height22 WColor3 minWidth70">工单内容：</p>
                                <div class="fontSize14 line-height22 WColor2">
                                    <p style="white-space: pre-wrap;word-break: break-all;">{{workOrderDetailsObj.serveDesc}}</p>
                                    <div>
                                        <el-image style="width: 120px; height: 120px;border-radius: 4px;margin-right: 23px"
                                                  v-for="url in workOrderDetailsObj.serveImages" :key="url" :src="url"
                                                  :preview-src-list="workOrderDetailsObj.serveImages">
                                        </el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-box marginBottom12">
                                <p class="fontSize14 line-height22 WColor3">报单人：</p>
                                <p class="fontSize14 line-height22 WColor2">{{ workOrderDetailsObj.proposer + " " +
                                        workOrderDetailsObj.proposerPhone
                                }}</p>
                            </div>
                        </div>
                        <div class="timeLineStyle">
                            <div class="title_box">
                                <span class="tile_line"></span>
                                <span class="title_text">工单进度追踪</span>
                                <span class="tile_line"></span>
                            </div>
                            <div class="timeline_box">
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item v-for="(activity, index) in workOrderDetailsObj['records']"
                                                      :key="index" color="#EED096" size="large">
                                        <div class="timeline_time">{{ activity.createTime }}</div>
                                        <div class="timeline_content">{{ activity.message }}</div>
                                        <div class="timeline_img">
                                            <el-image v-for="(item, index) in activity.url" :key="index" :src="item"
                                                      :preview-src-list="[item]" fit="cover">
                                            </el-image>
                                        </div>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="workbench-right-box overflowHidden" v-if="isAddWorkOrder">
                    <WorkBenchCard :title="title">
                        <template #back>
                            <div class="createBack fontSize14 cursorPointer" @click="addWorkOrderBack">
                                <!-- <svg-icon icon-class="back"/> -->
                                <img :src="require('src/images/uiImages/property/back.png')"
                                     style="width:16px;height:16px;transform: translateY(-2px);" alt="">
                                返回
                            </div>
                        </template>
                    </WorkBenchCard>
                    <div style="padding: 8px;max-height: 100%;overflow-y: auto">
                        <div style="padding: 13px 12px;" class="relative">
                            <el-form :model="form" ref="ruleForm" label-position='right' label-width="140px">
                                <!-- 业主 -->
                                <div v-if="userIdentityType == 4">
                                    <el-form-item v-if="userItemTitle_1 && userItemTitle_1['rooms'] && userItemTitle_1['rooms'].length == 1"
                                                  label="工单地址" class="marginBottom24" prop="address"
                                                  :rules="$validate.validates({ required: true, msg: '工单地址' })">
                                        <div class="flex-box">{{ userItemTitle_1['rooms'][0]['address'] }}</div>
                                    </el-form-item>
                                    <el-form-item v-else-if="userItemTitle_1 && userItemTitle_1['rooms'] && userItemTitle_1['rooms'].length > 1"
                                                  label="工单地址" class="marginBottom24" prop="address"
                                                  :rules="$validate.validates({ required: true, msg: '工单地址' })">
                                        <div class="flex-box">
                                            <EdSelect :selectParams="repairerParamsTwo_2" v-model="form.address">
                                            </EdSelect>
                                        </div>
                                    </el-form-item>
                                </div>
                                <!-- 物业人员 -->
                                <div v-else-if="userIdentityType == 2 || userIdentityType == 3">
                                    <el-form-item v-if="repairerParamsTwo_3.options.length == 1" label="工单地址"
                                                  class="marginBottom24" prop="address"
                                                  :rules="$validate.validates({ required: true, msg: '工单地址' })">
                                        <div class="flex-box">{{ repairerParamsTwo_3['options'][0]['villageName'] }}
                                        </div>
                                    </el-form-item>
                                    <el-form-item v-else label="工单地址" class="marginBottom24" prop="address"
                                                  :rules="$validate.validates({ required: true, msg: '所属项目' })">
                                        <EdSelect :selectParams="repairerParamsTwo_3" v-model="form.address"></EdSelect>
                                    </el-form-item>
                                </div>
                                <!-- 访客、商家 -->
                                <div v-else>
                                    <el-form-item label="工单地址" class="marginBottom24" prop="villageId"
                                                  :rules="$validate.validates({ required: true, msg: '所属项目' })">
                                        <div class="flex-box">
                                            <EdSelect :selectParams="repairerParamsTwo" v-model="form.villageId">
                                            </EdSelect>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="" class="marginBottom24" prop="address"
                                                  :rules="$validate.validates({ required: true, msg: '工单地址' })">
                                        <div class="flex-box">
<el-input placeholder="请填写期数门牌单元房间号，例：1期1栋1单元1201" v-model="form.address" maxlength="50"></el-input>
                                        </div>
                                    </el-form-item>
                                </div>

                                <el-form-item label="工单类型" class="marginBottom24" prop="orderType"
                                              :rules="$validate.validates({ required: true, msg: '请选择工单类型' })">
                                    <div class="flex-box">
                                        <EdSelect :selectParams="identityParams" v-model="form.orderType"></EdSelect>
                                    </div>
                                </el-form-item>
                                <el-form-item label="优先级" class="marginBottom24" prop="level">
                                    <div class="flex-box">
                                        <EdSelect :selectParams="levelParams" v-model="form.level"></EdSelect>
                                    </div>
                                </el-form-item>
                                <el-form-item label="工单内容" class="marginBottom24" prop="serveDesc">
                                    <div class="flex-box">
 <el-input type="textarea" :rows="6"  maxlength="500" show-word-limit placeholder="请输入工单内容描述" :resize="'none'" v-model="form.serveDesc"></el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item v-if="userIdentityType != 4 && userIdentityType != 2 && userIdentityType != 3"
                                              label="报单人" class="marginBottom24" prop="proposer"
                                              :rules="$validate.validates({ required: true, msg: '报单人' })">
                                    <div class="flex-box">
                                        <el-input placeholder="报单人" v-model="form.proposer" maxlength="50"></el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item v-if="userIdentityType != 4 && userIdentityType != 2 && userIdentityType != 3"
                                              label="" class="marginBottom24" prop="proposerPhone"
                                              :rules="$validate.validates({ required: true, msg: '请输入手机号', type: 'mobile' })">
                                    <div class="flex-box">
                                        <el-input placeholder="请输入手机号" v-model="form.proposerPhone" maxlength="11">
                                        </el-input>
                                    </div>
                                </el-form-item>
                                <!-- <el-form-item label="是否需要用户确认" class="marginBottom24" prop="isConfirmed" :rules="$validate.validates({required:true,msg:'请输入手机号'})">
                                    <div class="flex-box" style="margin-top: 13px">
                                        <el-radio-group v-model="form.isConfirmed">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="接单人" v-if="!form.isConfirmed" class="marginBottom24" prop="repairerId" :rules="$validate.validates({required:true,msg:'请选择接单人'})">
                                    <div class="flex-box">
                                        <EdSelect :selectParams="repairerParams" v-model="form.repairerId" @emit-select-value="emitSelectValue"></EdSelect>
                                    </div>
                                </el-form-item> -->
                                <el-form-item label="" class="">
                                    <div class="flex-box marginBottom24">
                                        <el-button class="ed-button ed_black-bottom" :loading="loading"
                                                   @click="addOrder('ruleForm')">提 交</el-button>
                                        <el-button class="ed-button ed_white_bottom" @click="addWorkOrderBack">取 消
                                        </el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <AssignDialog ref="people" :isShow="changeDialog" @close-dialog="changeDialog = false"
                      @save-dialog="savePeopleDialog"></AssignDialog>
        <EdDialog :width="'420px'" :title="'提交失败'" :showSubmitBtn="false" :showCloseBtn="false" class="errorDialog"
                  v-if="isAddWorkOrder && errorVisible">
            <el-result icon="error" :subTitle="errorVisible_desc">
                <template slot="extra">
                    <el-button class="ed-button ed_black-bottom" @click="handleErrSubmit">确定</el-button>
                </template>
            </el-result>
        </EdDialog>
    </PageCard>
</template>

<script>
import Viewer from './Chat/Viewer.vue'
import Channels from './Chat/Channels.vue'
import PageCard from 'src/views/components/PageCard.vue'
import WorkBenchCard from './components/WorkBenchCard.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdDateTimePicker from 'src/components/EdDateTimePicker.vue'
import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
import EdLazyCascader from 'src/components/EdLazyCascader.vue'
import EdUpload from 'src/components/EdUpload.vue'
import AssignDialog from '../workorder/AssignDialog.vue'
import { msgWxReply, getUserIdentity, orderQueryList, orderAdd, orderDetail, orderTransfer, orderUpdate, getVillageByOrgId } from "src/api/workbench";
import { getDictByCode } from "src/api/dictionaries";
import { infoTree } from "src/api/cascader";
import EdDialog from 'src/components/EdDialog.vue';
import AutoReply from './components/autoReply.vue';
export default {
    name: "workbench",
    components: {
        PageCard,
        WorkBenchCard,
        EdSelect,
        EdDateTimePicker,
        EdDateTimePickerRange,
        EdUpload,
        EdLazyCascader,
        AssignDialog,
        EdDialog,
        Viewer,
        Channels,
        AutoReply
    },
    data() {
        return {
            changeDialog: false,
            textarea: "",
            isHistoricalWorkOrder: true,
            isWorkOrderDetails: false,
            isAddWorkOrder: false,
            form: {
                villageId: "",
                address: "",
                orderType: "",
                level: '',
                serveDesc: "",
                // serveImages:[],
                // appointmentTime:"",
                proposer: "",
                proposerPhone: "",
                // repairerId:"",
                // isConfirmed:true,
            },
            identityParams: {
                options: [],
                props: { label: 'label', value: 'value' },
                placeholder: "请选择工单类型"
            },
            levelParams: {
                options: [],
                props: { label: 'label', value: 'value' },
                placeholder: "请选择优先级"
            },
            repairerParams: {
                options: [],
                props: { label: 'label', value: 'value' },
                placeholder: "请选择工作人员"
            },
            repairerParamsTwo: {
                options: [],
                props: { label: 'label', value: 'value' },
                placeholder: "请选择所属项目"
            },
            repairerParamsTwo_2: {
                options: [],
                props: { label: 'address', value: 'address' },
                placeholder: "请选择"
            },
            repairerParamsTwo_3: {
                options: [],
                props: { label: 'villageName', value: 'villageName' },
                placeholder: "请选择所属项目"
            },
            edUploadForm: {
                widthClass124: true,
                sizeTips: true,
                list: [],
                limit: 3
            },

            leftBackId: null,
            listItemTitle: {},
            userItemTitle: [],
            userItemTitle_1: {},            // type=4，房间信息 
            userItemTitle_1_villageId: '', // type=4，一套房的 illageId
            historicalWorkList: [],
            serve_order_level: [],
            serve_status_type: [],
            count: 1,
            workOrderDetailsObj: {},
            orderDetailId: null,
            proposerPhone: null,

            loading: false,
            title: "新增工单",
            // 详情追踪
            reverse: true,
            // 提交失败 dialog
            errorVisible: false,
            errorVisible_desc: '您所选择的工单类型没有对应处理人，请在“物业人员管理”中选择与工单类型匹配的职能',
            userIdentityType: '',  // 当前用户type
        }
    },
    computed: {
        disabledSeed() {
            if (this.leftBackId == null) {
                return true
            } else {
                return this.textarea == "";
            }
        }
    },
    activated() {
        this.infoTree();
        // 获取 工单类型(物业人员-所属职能)
        getDictByCode('member_functions_type').then(res => {
            this.identityParams.options = res.data.items;
        })
        getDictByCode('serve_order_level').then(res => {
            this.levelParams.options = res.data.items;
        })
        // 工单处理状态
        getDictByCode("serve_status_type").then(response => {
            if (response.code == 20000) {
                this.serve_status_type = response.data.items.map((item) => {
                    return {
                        value: item.value,
                        label: item.label
                    }
                })
            }
        })
    },
    methods: {
        getUserIdentity(id) {
            getUserIdentity({ id: id }).then(response => {
                if (response.code == 20000) {
                    let data = response.data && response.data.find((v, i) => {
                        return v['type'] == 4;
                    })
                    this.userItemTitle = data ? data : response.data[0];
                    this.userItemTitle_1 = data;
                }
            })
        },
        clickListItem(item) {
            this.historicalWorkList = [];
            this.count = 1;
            this.leftBackId = item.id;
            this.proposerPhone = item.mobile;
            if (this.proposerPhone) {
                this.orderQueryList(this.proposerPhone, 1, 10); // 工单列表
            }
            if (item.userIds) {
                this.getUserIdentity(item.userIds);
            } else {
                this.userItemTitle = [];
                this.userItemTitle_1 = null;
                this.userItemTitle_1_villageId = '';
            }
            this.isHistoricalWorkOrder = true;
            this.isWorkOrderDetails = false;
            this.isAddWorkOrder = false;
            this.listItemTitle = item;
        },
        seed() {
            let query = new Object();
            query.appId = this.listItemTitle.appId;
            query.openId = this.listItemTitle.openId;
            query.content = this.textarea;
            msgWxReply(query).then(async response => {
                if (response.code == 20000) {
                    this.$message.success({
                        message: "发送成功",
                        duration: 2000,
                        center: true
                    });
                    this.textarea = "";
                    await this.$refs.viewer.refresh()
                    this.$refs.viewer.scrollToBottom()
                }
            })
        },
        seedIfEnter(e) {
            if (e.altKey) {
                this.textarea += '\n'
            } else {
                e.preventDefault()
                this.seed()
            }
        },
        workOrderDetails(item) {
            this.orderDetailId = item.orderNo;
            if (item.status == 'reject') {
                this.updateWorkOrder(item.orderNo)
            } else {
                this.orderDetail(item.orderNo || item)
            }
        },
        orderDetail(id) {
            orderDetail({ id: id }).then(response => {
                if (response.code == 20000) {
                    // 处理追踪数据
                    response.data.records && response.data.records.forEach((v, i) => {
                        v['images'] = v['images'] && JSON.parse(v['images']);
                    })
                    this.workOrderDetailsObj = response.data;
                    this.isHistoricalWorkOrder = false;
                    this.isWorkOrderDetails = true;
                }
            })
        },
        savePeopleDialog(data) {
            let query = new Object();
            if (data) {
                query.orderId = this.orderDetailId;
                query.repairerPhone = data.mobile;
                query.repairerId = data.id;
                query.repairer = data.name;
            }
            orderTransfer(query).then(response => {
                if (response.code == 20000) {
                    this.$message.success({
                        message: "操作成功",
                        duration: 2000,
                        center: true
                    });
                    this.changeDialog = false;
                    this.workOrderDetails(this.orderDetailId)
                }
            }).catch(() => {
                this.$refs.people.cancelStatus()
            })
        },
        addWorkOrder() {
            this.initAddWork();
            this.edUploadForm.list = [];
            this.isAddWorkOrder = true;
            this.isHistoricalWorkOrder = false;
        },
        updateWorkOrder(id) {
            this.title = "提交工单";
            this.isAddWorkOrder = true;
            this.isHistoricalWorkOrder = false;
            this.orderDetailId = id;
            this.updateWorkOrderDetail(id)
        },
        infoTree() {
            infoTree({ orgId: this.$store.getters.vid, type: "village" }).then(response => {
                if (response.code == 20000) {
                    this.repairerParamsTwo.options = response.data.map((item) => {
                       return {
                            label: item.name,
                            value: item.id
                        }
                    })
                }
            })
        },
        updateWorkOrderDetail(id) {
            orderDetail({ id: id }).then(response => {
                if (response.code == 20000) {
                    this.form = response.data;
                    this.form.villageId = String(response.data.villageId);
                    this.form.appointmentTime = [response.data.appointmentTimeStart, response.data.appointmentTimeEnd];
                    this.edUploadForm.list = [];
                    response.data.serveImages.map((item) => {
                        this.edUploadForm.list.push({
                            url: item
                        })
                    })
                }
            })
        },
        workOrderDetailsBack() {
            this.isHistoricalWorkOrder = true;
            this.isWorkOrderDetails = false;
        },
        initAddWork() {
            this.form = {
                villageId: "",
                address: "",
                orderType: "",
                level: '',
                serveDesc: "",
                // serveImages:[],
                // appointmentTime:"",
                proposer: "",
                proposerPhone: "",
                // repairerId:"",
                // isConfirmed:true,
            };

            // 二期添加需要多传一个 proposerType 
            // type:  4 住户   2/3 物业工作人员    其他：商户    没有：访客
            const type = this.userItemTitle && this.userItemTitle['type'] || '';
            // 业主
            if (this.userItemTitle_1 && this.userItemTitle_1['rooms'].length == 1) this.userItemTitle_1_villageId = this.userItemTitle_1['rooms'][0]['villageId'];
            if (this.userItemTitle_1 && this.userItemTitle_1['rooms'].length > 1) this.repairerParamsTwo_2.options = this.userItemTitle_1['rooms'];

            this.userIdentityType = type;
            let proposerType = '';
            if (type) {
                if (type == 4) {
                    proposerType = '住户';
                } else if (type == 2 || type == 3) {
                    proposerType = '物业工作人员';
                    getVillageByOrgId({ orgId: this.userItemTitle['orgId'] }).then(res => {
                        this.repairerParamsTwo_3.options = res.data;
                    })
                } else {
                    proposerType = '商户';
                    this.form.proposerPhone = this.listItemTitle['mobile'] || '';
                }
            } else {
                proposerType = '访客'
                this.form.proposerPhone = this.listItemTitle['mobile'] || '';
            }
            this.form.proposerType = proposerType;
        },
        addWorkOrderBack() {
            this.initAddWork();
            this.$refs.ruleForm.resetFields();
            this.isAddWorkOrder = false;
            this.isHistoricalWorkOrder = true;
        },
        orderQueryList(proposerPhone, page, pageSize) {
            orderQueryList({ proposerPhone: proposerPhone, page: page, pageSize: pageSize }).then(response => {
                if (response.code == 20000) {
                    this.historicalWorkList = this.historicalWorkList.concat(response.data.records);
                }
            })
        },
        load() {
            this.count += 1;
            this.orderQueryList(this.proposerPhone, this.count, 10)
        },
        emitSelectValue(value) {
            this.repairerParams.options.forEach((item) => {
                if (item.value == value) {
                    this.form.repairer = item.label;
                    this.form.repairerPhone = item.mobile;
                }
            })
        },
        addOrder(formName) {
            if (this.userIdentityType == 4) {
                if (this.userItemTitle_1 && this.userItemTitle_1['rooms'].length == 1) {
                    // 为业主且 只有一套房
                    this.form.villageId = this.userItemTitle_1_villageId;
                    this.form.address = this.userItemTitle_1['rooms'][0]['address'];
                } else if (this.userItemTitle_1 && this.userItemTitle_1['rooms'].length > 1) {
                    // 多套
                    this.userItemTitle_1['rooms'].forEach((v, i) => {
                        if (v['address'] == this.form['address']) this.form['villageId'] = v['villageId']
                    })
                }
                this.form['proposer'] = this.listItemTitle['nickName'];
                this.form['proposerPhone'] = this.userItemTitle['mobile'];
            } else if (this.userIdentityType == 2 || this.userIdentityType == 3) {
                // 物业人员
                let obj = this.repairerParamsTwo_3['options'] && this.repairerParamsTwo_3['options'].find((v, i) => {
                    return this.form['address'] == v['villageName']
                })
                this.form.villageId = obj['id'] || obj['villageId'] || '';
                this.form['proposer'] = this.listItemTitle['nickName'] || '';
                this.form['proposerPhone'] = this.userItemTitle['mobile'] || '';
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let query = this.form.copy();
                    // query.appointmentTimeStart= this.form.appointmentTime[0];
                    // query.appointmentTimeEnd = this.form.appointmentTime[1];
                    // delete query.appointmentTime;
                    query.openId = this.listItemTitle.openId;
                    query.appId = this.listItemTitle.appId;
                    // this.loading = true;
                    let urlFn = null;
                    if (this.form.orderNo) {
                        urlFn = orderUpdate
                    } else {
                        urlFn = orderAdd
                    }
                    // console.log('query-->', query)
                    // return
                    urlFn(query).then(response => {
                        if (response.code == 20000) {
                            if (response.desc) {
                                this.errorVisible_desc = response.desc;
                                this.errorVisible = true;
                            }
                            this.$message.success({
                                message: "操作成功",
                                duration: 2000,
                                center: true
                            });
                            this.historicalWorkList = [];
                            this.userItemTitle_1_villageId = '';
                            if (this.proposerPhone) {
                                this.orderQueryList(this.proposerPhone, 1, 10);
                            }
                            this.addWorkOrderBack();
                        }
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                }
            })
        },
        handleErrSubmit() {
            this.errorVisible = false;
        },
    }
}
</script>

<style scoped>
.input-box:before {
    content: '';
    position: absolute;
    background-color: #E4E7ED;
    height: 1px;
    top: 0;
    left: 0;
    right: 0;
}

.textarea-content {
    color: #000000;
    background-color: white;
    padding: 20px 80px 20px 20px;
    outline: none;
    width: 100%;
    resize: none;
}
</style>

<style scoped lang="scss">
.workbench-right-box {
    width: 553px;
    border-radius: 12px;
    border: 1px solid #E4E7ED;
    height: 100%;

    .workbench-right-box-scroll {
        height: calc(100% - 65px);
        overflow-y: auto;

        .workbench-right-box-scroll-small-box {
            padding: 21px 20px;
            border-bottom: 1px solid #E4E7ED;

            &:last-child {
                border: none
            }
        }
    }
}

.WColor1 {
    color: #C0C4CC;
}

.WColor2 {
    color: #414448
}

.WColor3 {
    color: #606266
}

.WColor4 {
    color: #303133
}

.minWidth70 {
    min-width: 70px
}


:deep .el-card__body {
    height: calc(100% - 60px) !important;
}

:deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #EED096;
    background: #EED096;
}

:deep .el-radio__input.is-checked+.el-radio__label {
    color: #606266;
}
</style>

<style scoped lang="scss">
.right-triangle-box {
    width: 16px;
    background: #F4F4F4;
    height: 100%
}

.right-triangle-box:hover {
    background: #FEF9F0;
}

/*.wifi-symbol {*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    box-sizing: border-box;*/
/*    overflow: hidden;*/
/*    transform: rotate(135deg);*/

/*}*/
/*.wifi-circle {*/
/*    border: 5px solid #999999;*/
/*    border-radius: 50%;*/
/*    position: absolute;*/
/*}*/

/*.first {*/
/*    width: 5px;*/
/*    height: 5px;*/
/*    background: #cccccc;*/
/*    top: 45px;*/
/*    left: 45px;*/
/*}*/

/*.second {*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    top: 35px;*/
/*    left: 35px;*/
/*    animation: fadeInOut 1s infinite 0.2s;*/
/*}*/

/*.third {*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    top: 25px;*/
/*    left: 25px;*/
/*    animation: fadeInOut 1s infinite 0.4s;*/
/*}*/

/*@keyframes fadeInOut {*/
/*    0% {*/
/*        opacity: 0; !*初始状态 透明度为0*!*/
/*    }*/
/*    100% {*/
/*        opacity: 1; !*结尾状态 透明度为1*!*/
/*    }*/
/*}*/


.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .3s ease;
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
    {
    transform: translateX(10px);
    opacity: 0;
}

:deep .timeLineStyle {
    width: 100%;
    height: 70%;
    overflow: hidden;

    .title_box {
        width: 100%;
        margin-bottom: 20px;
        display: flex;

        .tile_line {
            display: inline-block;
            height: 1px;
            background: #E4E7ED;
            flex: 1;
            align-self: center;
        }

        .title_text {
            padding: 0 15px;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #414448;
        }
    }

    .timeline_box {
        overflow: hidden;
        height: 90%;

        .el-timeline {
            overflow-y: auto;
            height: 100%;

            // background: #FBFBFB;
            &::-webkit-scrollbar-thumb {
                background-color: #C1C1C1;
                border-radius: 2px;
            }

            .timeline_time {
                font-weight: 400;
                font-size: 12px;
                line-height: 18px;
                color: #606266;
            }

            .timeline_content {
                font-weight: 500;
                font-size: 14px;
                line-height: 24px;
                color: #414448;
                margin: 5px 0;
            }

            .timeline_img {
                img {
                    width: 72px;
                    height: 72px;
                    margin-right: 5px;
                    cursor: pointer;
                }
            }

            .el-timeline-item {
                .el-timeline-item__node--large {
                    left: 0;
                }

                .el-timeline-item__tail {
                    left: 6px;
                }
            }
        }
    }

}

:deep .errorDialog {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    line-height: 22px;

    .el-dialog__body {
        padding: 0;

        .el-result {
            padding: 0;

            .el-result__icon .icon-error {
                fill: #F56C6C;
            }

            .el-result__title p {
                font-size: 14px;
                color: #606266;
            }

            .el-result__subtitle p {
                font-size: 14px;
                color: #606266;
                line-height: 25px;
                margin: 10px 40px 0;
            }
        }
    }
}
</style>